<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!--
    svg精灵图的原理:

    1.symbol 可以用于包裹icon;直接不展示我们的图标
      svg标签包裹所有的symbol

      ====> 制作svg雪碧图   麻烦!!!!


    2.使用svg精灵图

    <svg>
      <use xlink:href="#one"></use>
    </svg>

    更加麻烦!!!!

   -->

    <svg style="display: none">
      <symbol
        id="one"
        width="128"
        height="128"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M73.137 29.08h-9.209 29.7L63.886.093 34.373 29.08h20.49v27.035H27.238v17.948h27.625v27.133h18.274V74.063h27.41V56.115h-27.41V29.08zm-9.245 98.827l27.518-26.711H36.59l27.302 26.71zM.042 64.982l27.196 27.029V38.167L.042 64.982zm100.505-26.815V92.01l27.41-27.029-27.41-26.815z"
        />
      </symbol>

      <symbol
        id="two"
        width="128"
        height="128"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M88.883 119.565c-7.284 0-19.434 2.495-21.333 8.25v.127c-4.232.13-5.222 0-7.108 0-1.895-5.76-14.045-8.256-21.333-8.256H0V0h42.523c9.179 0 17.109 5.47 21.47 13.551C68.352 5.475 76.295 0 85.478 0H128v119.57l-39.113-.005h-.004zM60.442 24.763c0-9.651-8.978-16.507-17.777-16.507H7.108V111.43H39.11c7.054-.14 18.177.082 21.333 6.12v-4.628c-.134-5.722-.004-13.522 0-13.832V27.413l.004-2.655-.004.005zm60.442-16.517h-35.55c-8.802 0-17.78 6.856-17.78 16.493v74.259c.004.32.138 8.115 0 13.813v4.627c3.155-6.022 14.279-6.26 21.333-6.114h32V8.25l-.003-.005z"
        />
      </symbol>

      <symbol
        id="three"
        width="128"
        height="128"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"
        />
        <path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z" />
        <path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z" />
      </symbol>
    </svg>

    <svg>
      <use xlink:href="#one"></use>
    </svg>

    <svg>
      <use xlink:href="#two"></use>
    </svg>
    <svg>
      <use xlink:href="#two"></use>
    </svg>
    <svg>
      <use xlink:href="#two"></use>
    </svg>
  </body>
</html>
